<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>iMac苹果系统菜单效果</title>
<style>
* {margin:0; padding:0; list-style:none;}
#div1 {position:absolute; bottom:10px; width:100%; text-align:center;}
#div1 img {width: 64px;}
</style>
<script src="../../utils.js"></script>
<script>
// 距离和放大比例公式
// 400  1
// 0    2
// rate = 2 - distance / 400  (distance > 400   rate === 1)

class Mac {
  constructor () {
    this.imgs = document.querySelectorAll('#div1 img')
    this.bindEvent()
  }
  bindEvent () {
    document.onmousemove = e => {
      // 根据鼠标坐标计算直角边
      this.imgs.forEach(img => {
        var a = e.pageX - utils.getBodyOffset(img).left - img.offsetWidth / 2
        var b = e.pageY - utils.getBodyOffset(img).top - img.offsetHeight / 2
        this.zoom(img, a, b)
      })
    }
  }
  zoom (img, a, b) {
    var c = Math.sqrt(a*a + b*b)
    // 计算放大比例
    var rate = 2 - c / 400
    if (rate < 1) rate = 1
    img.style.width = 64 * rate + 'px'
  }
}

window.onload = function () {
  new Mac()
}

</script>
</head>

<body>
<div id="div1">
	<img src="img/01.png" />
  <img src="img/02.png" />
  <img src="img/03.png" />
  <img src="img/01.png" />
  <img src="img/02.png" />
</div>
</body>
</html>
